<template>
  <h1>Container组件</h1>
  <div class="common-layout">
    <Container direction="vertical">
      <Header :Height=80>Header</Header>
      <Main>Main</Main>
    </Container>
  </div>
  <div class="common-layout">
    <Container direction="vertical">
      <!-- 传入高度 -->
      <Header>Header</Header>
      <Main>Main</Main>
      <Footer>Footer</Footer>
    </Container>
  </div>

  <div class="common-layout">
    <Container direction="horizontal">
      <!-- 传入宽度 -->
      <Aside>Aside</Aside>  
      <Main>Main</Main>
      <Aside>Aside</Aside>
    </Container>
  </div>

  <div class="common-layout">
    <Container direction="horizontal">
      <Header>Header</Header>
      <Aside :Width=100>Aside</Aside>
      <Main>Main</Main>
    </Container>
  </div>
  
</template>

<script setup lang="ts">
import Container from '@/components/Container/Container.vue';
import Header from '@/components/Container/Header.vue';
import Footer from '@/components/Container/Footer.vue';
import Aside from '@/components/Container/Aside.vue';
import Main from '@/components/Container/Main.vue';
defineOptions({
  name:'containerView'
})

</script>

<style scoped>
div{
  margin-bottom: 20px;
}
</style>